<template>
<view class="">
  <view class="comment-list" @click.stop="replycloseWay()">
    <view v-for="(item,index) in commentList" :class="type==0?'b-t-16 item dis-flex':'item dis-flex'" :key="index">
      <!-- 头像 -->
      <view class="img_view">
        <image class="img" :src="(item.user.avatar!=''&&item.user!=null&&item.user!=undefined)?item.user.avatar:imgPrefix('/static/image/icon/default_avatar.png')" lazy-load></image>
      </view>
      <!--  -->
      <view class="right flex-box" :class="type==1?'b-b-ededed':'p-b-32'">
        <view class="dis-flex flex-x-between m-b-12">
          <view class="f_24 navy_blue name">{{item.user.nickname!=''?item.user.nickname:item.user.mobile}}</view>
          <view class="f_22 gery1">{{item.createtime}}</view>
        </view>
        <view class="score dis-flex flex-y-center">
          <text class="f_24 gery1 m_r_8">评分:</text>
          <image v-for="(score_item,index) in item.com_score" :key="score_index" :src="imgPrefix('/static/image/icon/comment_status_1.png')"></image>
        </view>
        <view class="f_24 msg">
          {{item.content}}
        </view>
        <view :class="item.tag.length>0?'tag-box dis-flex':''">
          <view v-for="(tagitem,tagindex) in item.tag" :key="tagindex" class="tagitem f_22">
            {{tagitem.tag_name}}
          </view>
        </view>
        <!-- 用户身份 0 学生  1 老师 页面展示内容根据身份类型区分 -->
        <view class="back f_22" v-if="item.reply.length>0" v-for="(replyitem,replyindex) in item.reply" :key="replyindex">
          教师回复：{{replyitem.content}}
        </view>
        <view class="reply gery1 f_28 fr" v-if="userIdentity==1&&item.reply.length<=0" @click.stop="replyWay(item.course_comment_id)">
          回复
        </view>
      </view>
    </view>
  </view>

  <view class="reply_box dis-flex flex-y-center flex-x-between" v-if="replyShow">
    <input focus type="text" v-model="replyValue" placeholder="说点什么吧～" placeholder-class="f_28 placeholderclass" />
    <text class="violet1 f_32" @click.stop="bindReply()">回复</text>
  </view>
</view>
</template>

<script>
import {
  commonMixinFun
} from '@/static/mixins/common.js';
export default {
  mixins: [commonMixinFun],
  name: 'index',
  props: {
    commentList: {
      type: Array,
      default: []
    },
    type: {
      type: [Number, String],
      default: 0
    },
  },
  data() {
    return {
      replyShow: false,
      replyValue: '', //评论内容
      course_comment_id: -1, //评论的id
    };
  },
  methods: {
    replycloseWay() {
      this.replyShow = false
      this.course_comment_id = ''
      this.replyValue = ''
    },
    replyWay(course_comment_id) {
      this.replyShow = true
      this.course_comment_id = course_comment_id
    },
    bindReply() {
      if (this.replyValue == '') {
        this.showToast('请填写回复内容')
      } else {
        this.$emit('bindReply', this.course_comment_id, this.replyValue);
        this.replycloseWay()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-list {
  background: white;

  .b-t-16 {
    border-top: 16rpx solid #f4f4f4;
  }

  .item {
    padding: 32rpx 48rpx 0 48rpx;

    .img_view {
      .img {
        display: block;
        flex-shrink: 0;
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        overflow: hidden;
      }

      margin-right: 16rpx;
    }

    .b-b-ededed {
      border-bottom: 1px solid #ededed;
      padding-bottom: 32rpx;
    }

    .p-b-32 {
      padding-bottom: 32rpx;
    }

    .right {
      .name {
        margin-bottom: 12rpx;
      }

      .score {
        margin-bottom: 34rpx;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 2rpx;
        }
      }

      .msg {
        margin-bottom: 24rpx;
      }

      .tagitem {
        color: rgba(37, 39, 72, 0.5);
        ;
        background-color: rgba(37, 39, 72, 0.06);
        margin-bottom: 24rpx;
        white-space: nowrap;
        margin-right: 16rpx;
        border-radius: 4rpx;
        padding: 6rpx 8rpx;
      }

      .back {
        color: rgba(37, 39, 72, 0.5);
        ;
        background-color: rgba(37, 39, 72, 0.06);
        padding: 16rpx;
      }
    }
  }

  .m_r_8 {
    margin-right: 8rpx;
  }
}

.reply {
  padding: 6rpx 20rpx;
  background-color: rgba(143, 143, 154, 0.2);
  border-radius: 8rpx;
  display: inline-block;
}

.reply_box {
  position: fixed;
  padding: 20rpx 32rpx;
  bottom: 0;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  width: 100%;
  background-color: white;

  input {
    padding: 16rpx 24rpx;
    background-color: #f2f2f2;
    border-radius: 40rpx;
    height: 72rpx;
    width: 590rpx;
  }

  .placeholderclass {
    color: #bfbec3;
  }
}
</style>
